<template>
  <view>
    <NavigationBar
      title="购物车"
      titleColor="#000"
      backgroundColor="#fff"
      ref="navbar"
    />
    <view :style="{ height: navbarHeight }"></view>
    <!-- 空购物车 -->
    <view class="empty" v-if="shoppingCartEmpty">
      <image src="/static/shoppingCart/购物车-空.png" mode="aspectFit"></image>
      <text style="color: #999; font-size: 26rpx; margin-top: 10rpx"
        >购物车空空如也</text
      >
      <text style="font-size: 30rpx; color: #333; margin-top: 10rpx"
        >赶紧买点宝贝慰劳一下自己吧</text
      >
      <button @click="goShopping">去逛逛</button>
    </view>
    <!-- 有商品的购物车 -->
    <view class="hasGoods" v-if="!shoppingCartEmpty">
      <view
        class="goodsCard"
        v-for="(item, index) in shoppingCartList"
        :key="item.id"
      >
        <!-- 选中商品 -->
        <view
          class="checkbox"
          :class="{ checked: item.checked }"
          @click="handleChecked(index, item.checked)"
        >
          <uni-icons type="checkmarkempty" color="#fff" size="15"></uni-icons>
        </view>
        <!-- 商品封面 -->
        <view class="goodsCover">
          <image :src="item.imgUrl" mode="aspectFit"></image>
        </view>
        <!-- 商品信息 -->
        <view class="goodsInfo">
          <text class="name">{{ item.name }}</text>
          <text class="tag">{{ item.tag }}</text>
          <text class="price">￥{{ item.price }}</text>
        </view>
        <!-- 商品数量 -->
        <view class="quantity">
          <view class="container">
            <view class="sub" @click="changeQuantity('sub', index)">
              <uni-icons type="minus" size="35" color="#999"></uni-icons>
            </view>
            <text>{{ item.quantity }}</text>
            <view class="add" @click="changeQuantity('add', index)">
              <uni-icons
                type="plus-filled"
                size="35"
                color="#FF5B2D"
              ></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 去结算 -->
    <view class="goSaa">
      <!-- 全选 -->
      <view class="selectAll">
        <view
          class="checkbox"
          :class="{ checked: selectAllStatus }"
          @click="handleSelectAll"
        >
          <uni-icons type="checkmarkempty" color="#fff" size="15"></uni-icons>
        </view>
        <text>全选</text>
      </view>
      <!-- 去结算 -->
      <view class="go">
        <text>总计：</text>
        <text style="color: #ff5b2d">￥{{ totalPrice }}</text>
        <button>去结算</button>
      </view>
    </view>
    <!-- 猜你喜欢 -->
    <view class="love">
      <view class="title">
        <image src="/static/shoppingCart/猜你喜欢.png" mode="aspectFit"></image>
      </view>
      <GoodsCard
        v-for="item in goodsList"
        :key="item.id"
        :goodsInfo="item"
        @addShoppingCart="handleAddShoppingCart"
      />
      <view class="noMore">
        <text>没有更多咯~</text>
      </view>
    </view>
  </view>
</template>

<script>
import NavigationBar from "../../components/NavigationBar.vue";
import GoodsCard from "../../components/GoodsCard.vue";
export default {
  components: {
    NavigationBar,
    GoodsCard,
  },
  data() {
    return {
      navbarHeight: 0,
      goodsList: [
        // 商品列表
        {
          id: 1,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 2,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 3,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 4,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 5,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
        {
          id: 6,
          imgUrl: "/static/goods/山竹.png",
          name: "泰国进口山竹5A级",
          tag: "果汁饱满 汁水充盈",
          price: 25.3,
          unit: "斤",
        },
      ],
    };
  },
  onLoad() {
    this.navbarHeight = this.$refs.navbar.navigationBarHeight;
  },
  methods: {
    goShopping() {
      uni.pageScrollTo({
        scrollTop: 300,
        duration: 300,
      });
    },
    handleAddShoppingCart(goodsInfo) {
      // 添加购物车
      console.log("goodsInfo: ", goodsInfo);
      this.$store.dispatch("addShoppingCart", goodsInfo);
      console.log(this.$store.state.shoppingCart);
    },
    handleChecked(index, currentStatus) {
      console.log(index, currentStatus);
      this.$store.state.shoppingCart[index].checked = !currentStatus;
      console.log(this.$store.state.shoppingCart);
    },
    changeQuantity(type, index) {
      // 修改商品下单数量
      switch (type) {
        case "add":
          this.$store.state.shoppingCart[index].quantity++;
          break;
        case "sub":
          if (this.$store.state.shoppingCart[index].quantity > 1) {
            this.$store.state.shoppingCart[index].quantity--;
          }
          break;
        default:
          throw "操作类型错误";
      }
    },
    handleSelectAll() {
      // 购物车全选按钮
      const data = this.$store.state.shoppingCart;
      if (this.selectAllStatus) {
        this.$store.state.shoppingCart = data.map((item) => {
          return {
            ...item,
            checked: false,
          };
        });
      } else {
        this.$store.state.shoppingCart = data.map((item) => {
          return {
            ...item,
            checked: true,
          };
        });
      }
    },
  },
  computed: {
    shoppingCartList() {
      // 购物车商品列表
      return this.$store.state.shoppingCart;
    },
    shoppingCartEmpty() {
      // 购物车是否为空
      const arrLength = this.$store.state.shoppingCart.length;
      return arrLength > 0 ? false : true;
    },
    selectAllStatus() {
      // 全选购物车状态
      if (this.shoppingCartList.length < 1) {
        return false;
      }
      return this.shoppingCartList.every((item) => item.checked);
    },
    totalPrice() {
      // 结算商品总计
      if (this.shoppingCartList.length < 1) {
        return 0;
      }
      return this.shoppingCartList.reduce((accumulator, currentValue) => {
        let price = currentValue.price;
        let quantity = currentValue.quantity;
        if (currentValue.checked) {
          const result = (price * quantity + accumulator).toFixed(2);
          return parseFloat(result);
        }
        return accumulator;
      }, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
// 空购物车
.empty {
  width: 100%;
  padding: 50rpx 0;
  background-color: #fff;
  border-top: 1rpx solid #707070;
  display: flex;
  align-items: center;
  flex-direction: column;

  image {
    width: 366rpx;
    height: 224rpx;
  }

  button {
    width: 186rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 26rpx;
    color: #fff;
    border-radius: 10rpx;
    background-color: $main-color;
    text-align: center;
    margin-top: 26rpx;
  }
}

// 选中商品（未选中）
.checkbox {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  padding: 5rpx;
  border: 2rpx solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border 0.3s, background-color 0.3s;
}

// 选中商品（已选中）
.checked {
  border: none;
  background-color: $main-color;
  border: 2rpx solid $main-color;
}

// 有商品的购物车
.hasGoods {
  width: 690rpx;
  padding: 35rpx 0;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 30rpx !important;
  border-radius: 10rpx;
  text-align: center;

  .goodsCard {
    width: 645rpx;
    height: 155rpx;
    margin: 0 auto;
    margin-top: 35rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    &:first-child {
      margin-top: 0;
    }

    // 商品封面
    .goodsCover {
      width: 150rpx;
      height: 150rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      image {
        width: 95%;
      }
    }

    // 商品信息
    .goodsInfo {
      width: 250rpx;
      height: 90%;
      text-align: left;

      .name {
        width: 100%;
        height: 45rpx;
        line-height: 45rpx;
        text-align: left;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30rpx;
        color: #333;
      }

      .tag {
        display: inline-block;
        padding: 0 10rpx;
        height: 40rpx;
        font-size: 20rpx;
        color: #999;
        line-height: 40rpx;
        border: 2rpx solid #999;
        border-radius: 20rpx;
      }

      .price {
        font-size: 35rpx;
        margin-top: 15rpx;
        color: #333;
      }
    }

    // 商品数量
    .quantity {
      width: 150rpx;
      height: 100%;
      position: relative;

      .container {
        width: 100%;
        height: 54rpx;
        line-height: 54rpx;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;

        view {
          width: 54rpx;
          height: 54rpx;
          text-align: center;
        }
      }
    }
  }
}

// 去结算
.goSaa {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;

  // 全选
  .selectAll {
    width: 180rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 26rpx;
    color: #333;
  }

  .go {
    width: 350rpx;
    height: 100%;
    display: flex;
    color: #333;
    justify-content: space-evenly;
    align-items: center;
    font-size: 26rpx;

    button {
      width: 144rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 26rpx;
      color: #fff;
      background-color: $main-color;
      border-radius: 30rpx;
    }
  }
}

// 猜你喜欢
.love {
  width: 702rpx;
  margin: 42rpx auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;

  .title {
    width: 100%;
    height: 53rpx;
    text-align: center;
    margin-bottom: 30rpx;

    image {
      width: 263rpx;
      height: 100%;
    }
  }

  .noMore {
    width: 100%;
    height: 36rpx;
    line-height: 36rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
    margin: 20rpx 0;
  }
}
</style>
